<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
        <title> {{ config.title }} </title>
    {% if config.extra.bundled is matching("^[Tt]rue") %}
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css" async>
      <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
      <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
    {% else %}
      <link rel="stylesheet" href="/styles/bulma.min.css" async>
      <script src="https://unpkg.com/ionicons@5.2.3/dist/ionicons.js" async></script>
    {% endif %}
		<link rel="icon" type="image/png" href="/favicon.png">
		<meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    .ion-fix {
      position:relative;

    }

    ion-icon {
      position:absolute;
      top:-8%; 
      right: 125%;
    }
    </style>
	</head>

	<body>

		<section class="section">
			<div class="container">

				<nav class="navbar" role="navigation" aria-label="main navigation">
					<div id="navbar" class="navbar-menu is-active">
						<div class="navbar-start has-text-centered">
						{% for item in config.extra.menu %}
							<a class="navbar-item" href="{{item.link}}">
								{{item.text}}
							</a>
						{% endfor %}
						</div>
					</div>
				</nav>
				{% block content %} {% endblock %}
		<footer class="footer">
			<div class="content has-text-centered">
				<div class="columns is-centered is-vcentered">
					{% for index in config.extra.social %}
					<div class="column">
						<a href="{{ index.link }}">
								<span class="ion-fix">
									<ion-icon name="{{ index.icon }}" class="icon"></ion-icon>
								</span>
								<b>{{ index.user }}</b>
						</a>
					</div>
					{% endfor %}
				</div>
				<p>
                <strong> {{ config.extra.author }} </strong>. The website content is licensed
				<a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
				</p>
			</div>
		</footer>
			</div>

		</section>

	</body>
</html>
